import React, {
  Component
} from 'react'
import {
  StyleSheet,
  View,
  ListView,
  Image,
  Text,
  TouchableOpacity
} from 'react-native'
import {Icon} from '../../components/common/icon'
import NavigationBar from '../../components/common/NavigationBar'
import QRCode from 'react-native-qrcode'

class FamilyTransfer extends Component {
  constructor(props) {
    super(props)
    // 初始状态
    this.state = {
      text: 'https://www.baidu.com/'
    }
  }
  render() {
    return (
      <View style = {styles.container}>
        <NavigationBar
          title={'家庭转让'}
          statusBar={{backgroundColor: '#F4F4F4', barStyle: 'dark-content'}}
          style={{backgroundColor: '#F4F4F4'}}
          navigator={this.props.navigator}
        />
        <View style={styles.body}>
          <View style={styles.titleView}>
            <Image source={require('../../img/camera.png')} style={styles.avator}></Image>
            <Text style={styles.name}>周杰伦的家</Text>
          </View>
          <View style={styles.QRCodeView}>
            <QRCode
              value={this.state.text}
              size={196}
              bgColor='#000000'
              fgColor='white'/>
            <Text style={styles.effectiveTime}>15分钟内有效</Text>
          </View>
          <View style={styles.bottomView}>
            <Text style={styles.text1}>请用雅观智能APP扫码添加</Text>
            <Text style={styles.text2}>为了您隐私安全性，请妥善保管次二维码，对方使用APP扫码后 将会把管理员权限转移到该用户名下。</Text>
          </View>
        </View>
      </View>
    )
  }
}

export default FamilyTransfer

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F4F4F4',
    flex: 1,
  },
  body: {
    flex: 1,
  },
  titleView: {
    marginLeft: 15,
    marginRight: 15,
    marginTop: 10,
    height: 98,
    backgroundColor: '#ffffff',
    flexDirection: 'row',
    alignItems: 'center',
  },
  avator: {
    width: 54,
    height: 54,
    borderRadius: 27,
    marginLeft: 28,
    marginRight: 10,
  },
  name: {
    color: '#333333',
    fontSize: 14,
  },
  QRCodeView: {
    flex: 1,
    alignItems: 'center',
    paddingTop: 62,
  },
  effectiveTime: {
    fontSize: 12,
    color: '#999999',
    marginTop: 42,
  },
  bottomView: {
    alignItems: 'center',
  },
  text1: {
    color: '#333333',
    fontSize: 14,
  },
  text2: {
    color: '#999999',
    fontSize: 12,
    marginTop: 15,
    marginBottom: 30,
    paddingLeft: 20,
    paddingRight: 20,
  }
})
